<template>
  <div class="system-layout">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统管理</span>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane 
          v-if="hasConfigPermission" 
          label="系统配置" 
          name="configs"
        >
          <div v-if="activeTab === 'configs'">
            <ConfigList />
          </div>
        </el-tab-pane>


      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import ConfigList from './ConfigList.vue'
import { ALL_PERMISSIONS } from '@/constants/permissions'

const userStore = useUserStore()
const activeTab = ref('configs')

// 权限检查
const hasConfigPermission = computed(() => userStore.hasPermission(ALL_PERMISSIONS.SYSTEM_CONFIG_READ));

// 标签点击处理
const handleTabClick = (tab: any) => {
  const tabName = tab.props.name
  // 不再需要路由跳转，直接切换标签即可
  activeTab.value = tabName
}

onMounted(() => {
  // 根据权限设置默认标签
  if (hasConfigPermission.value) {
    activeTab.value = 'configs'
  }
})
</script>

<style scoped>
.system-layout {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 